<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>菜单管理</title>
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="renderer" content="webkit">
<script src="../../js/jquery.js"></script>
<script src="../../js/bootstrap/js/bootstrap.js"></script>
<link href="../../js/bootstrap/css/bootstrap.css" rel="stylesheet">
<link href="../../js/bootstrap/css/font-awesome.css" rel="stylesheet">
<link rel="stylesheet" href="../../css/MyCss.css" />
<script src="../../js/DataTables/js/jquery.dataTables.hxqc.js"></script>
<link href="../../js/DataTables/css/dataTables.bootstrap.css"
	rel="stylesheet">
<script src="../../js/DataTables/js/dataTables.bootstrap.js"></script>
<!--自定义样式 及 公共js--->
<link href="../../css/public.css" rel="stylesheet">
<script src="../../js/public.js"></script>


</head>

<body>
	<!--内容页开始 -->
	<div class="container-fluid">

		<!--表单框架-->
		<form class="form-horizontal" id="test">
			<div class="form_area">
				<div class="form_head">
						<div class="row">
							<div class="col-sm-9"><span class="title">菜单管理</span></div>
							<div class="col-sm-3"></div>
						</div>
				</div>
				<!--表格体-->
				<div class="form_body" style="padding: 15px 10px 5px 10px;">

					<div class="row">
						<div class="col-sm-6">
							<div class="form-group">
								<div class="input-group">
									<label class="input-group-addon">菜单名称：</label> <input
										name="right_name" id="right_name" type="text"
										placeholder="菜单名称" class="form-control">
								</div>
							</div>
						</div>

						<div class="col-sm-3">
							<div class="form-group">
								<div class="input-group">
									<label class="input-group-addon">菜单状态：</label> <select
										name="status" id="status" class="form-control">
										<option value="" selected="selected">全部</option>
										<option value="1">启用</option>
										<option value="0">停用</option>
									</select>
								</div>
							</div>
						</div>


						<button type="button" class="btn btn-success " id="search_btn"
							style="margin-left: 10px;">搜索</button>
						
						<button type="button" id="addBtn" data-right="/page/menu/addMenu.html"
							class="btn btn-success min_width ">
							<span class="glyphicon glyphicon-plus"></span> 添加菜单
						</button>
						
					</div>

				</div>
				<div class="row" style="padding-bottom: 20px;margin: 0px;">
					<div class="table-responsive" style="height: 610px;">
						<!--  .table-responsive  响应式表格 表格太宽时底部出现滚动条-->
						<table id="example"
							class="table table-striped table-hover table-bordered">
							<thead>
								<tr>
									<th>菜单名称</th>
									<th>菜单地址</th>
									<th>排序</th>
									<th>排序值</th>
									<th>最近修改日期</th>
									<th>类型</th>
									<th>启用停用</th>
									<th>操作</th>
								</tr>
							</thead>
						</table>
					</div>

				</div>
			</div>

		</form>
	</div>

	<!--内容页结束-->
	<script>
		var table;
		$(document)
				.ready(
						function() {

							$("#search_btn").click(function() {
								table.fnFilter();
							});
							table = $("#example")
									.dataTable(
											{
												"bProcessing" : true,// 加载数据时候是否显示进度条
												"ordering" : false,// thead上的排序按钮
												"searching" : false,// 搜索输入框显示
												"bLengthChange" : false,// 分页条数选择按钮
												"iDisplayLength" : 10,
												"bServerSide" : true,// 是否从服务加载数据
												"sAjaxSource" : GLOBAL.ctx
														+ "/menu/list",// 如果从服务器端加载数据,这个属性用于指
												"sServerMethod" : "post",
												"bPaginate" : false,
												"bInfo" : false,
												// 定加载的路径
												"defData" : {
													"right_name" : "right_name",
													"access_type" : "access_type",
													"status" : "status"
												},
												columns : [
														{
															data : "right_name",
															render : function(
																	data, type,
																	row) {
																if (row.parent_id == '0')
																	return "<font color='blue'>"
																			+ data
																			+ "</font>";
																else
																	return data;
															}
														},
														{
															data : "access_value"
														},

														{
															data : "right_id",
															render : function(
																	data, type,
																	row) {
																var content = "<button name='toTop' type='button' onclick='submitbyorder(\"TOP\","
																		+ data
																		+ ")' value="
																		+ data
																		+ " class='glyphicon glyphicon-chevron-up btn'  style='background-color: transparent'></button>";
																content += "<button name='toUp' type='button' onclick='submitbyorder(\"UP\","
																		+ data
																		+ ")' value="
																		+ data
																		+ " class='glyphicon glyphicon-arrow-up btn'  style='background-color: transparent'></button>";
																content += "<button name='toDown' type='button' onclick='submitbyorder(\"DOWN\","
																		+ data
																		+ ")' value="
																		+ data
																		+ " class='glyphicon glyphicon-arrow-down btn'  style='background-color: transparent'></button>";
																content += "<button name='toBottom' type='button' onclick='submitbyorder(\"BOTTOM\","
																		+ data
																		+ ")' value="
																		+ data
																		+ " class='glyphicon glyphicon-chevron-down btn'  style='background-color: transparent'></button>";
																return content;
															}
														},
														{
															data : "sort_id"
														},
														{
															data : "modified",
															render : function(
																	data, type,
																	row) {

																return data
																		.ToLocalTime();
															}
														},
														{
															data : "access_type",
															render : function(
																	data, type,
																	row) {
																return data==="2"?"按钮":"菜单";
															}
														},
														{
															data : "status",
															render : function(
																	data, type,
																	row) {
																return "<input type='checkbox' disabled='disabled' "
																		+ (data == "0" ? ""
																				: "checked='checked'")
																		+ " />";
															}
														},
														{
															data : "right_id",
															render : function(
																	data, type,
																	row) {
																return '<button type="button" onclick="editRight('
																		+ data
																		+ ')" class="btn btn-primary">编辑</button><button type="button" onclick="delRight('
																		+ data
																		+ ')" style="margin-left:2px;" class="btn btn-danger">删除</button>';
															}
														} ],
												"oLanguage" : { // 主要用于设置各种提示文本
													"sProcessing" : "正在处理...", // 设置进度条显示文本
													"sLengthMenu" : "每页_MENU_行",// 显示每页多少条记录
													"sEmptyTable" : "没有找到记录",// 没有记录时显示的文本
													"sZeroRecords" : "没有找到记录",// 没有记录时显示的文本
													"sInfo" : "当前第_START_至_END_条  共计_TOTAL_条",
													"sInfoEmpty" : "",// 没记录时,关于记录数的显示文本
													"sSearch" : "搜索:",// 搜索框前的文本设置
													"oPaginate" : {
														"sFirst" : "首页",
														"sLast" : "未页",
														"sNext" : "下页",
														"sPrevious" : "上页"
													}

												}
											});

							$("#right_name").keypress(function(e) {
								// 回车键事件  
								if (e.which == 13) {
									table.fnFilter();
									return false;
								}
							});

							$("#addBtn").bind(
									"click",
									function() {
										GLOBAL.OpenUrl(
												"/page/menu/addMenu.html",
												"菜单添加");
									});

						});

		function submitbyorder(option, right_id) {
			$.post(GLOBAL.ctx + "/menu/order", {
				"option" : option,
				"right_id" : right_id
			}, function(data) {
				if (optFlag = 'Y') {
					table.fnDraw(false);
				}
			}, "json");
		}

		function updateSort(right_id, sort_id) {
			if (null == sort_id || sort_id == "") {
				alert("排序值必须为数字!");
				return;
			}
			$.post(GLOBAL.ctx + "/menu/updateSort", {
				"sort_id" : sort_id,
				"right_id" : right_id
			}, function(data) {
				if (data.optFlag != 'Y') {
					alert(data.optDesc);
				} else {
					table.fnDraw(false);
				}
			}, "json");
		}

		function editRight(right_id) {
			location.href = "editMenu.html?right_id=" + right_id;
		}
		function delRight(right_id) {
			if (confirm("是否确认删除?")) {
				$.post(GLOBAL.ctx + "/menu/deleteRight", {
					"right_id" : right_id
				}, function(data) {
					if (data.optFlag != 'Y') {
						alert(data.optDesc);
					} else {
						table.fnDraw(false);
					}
				}, "json");
			}
		}
	</script>
</body>
</html>

